<template>
  <div class="Son">孙组件
    <button @click="isShow=true">展示商品</button>
    <teleport to="body">
        <div class="mask" v-if="isShow">
            <div class="store">
                <h2>商品信息</h2>
                <p>名称：{{name}}</p>
                <p>价格：{{price}}</p>
                <button @click="isShow=false">关闭</button>
            </div>
        </div>
    </teleport>
  </div>
  
</template>

<script>
import {inject,toRefs,ref} from 'vue'
export default {
    name:'Son',
    setup(){
        
        let isShow = ref(false)
        let car = inject('car');

        return {
            isShow,
            ...toRefs(car)
        }
    }
}
</script>

<style>
    .Son{
        background-color: lightcoral;
        padding: 10px;
    }
    .mask{ 
        background-color: rgba(0, 0, 0, 0.3);
        text-align: center;
        position: absolute;
        top:0;
        bottom: 0;
        right: 0;
        left: 0;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }
    .store{ 
        width: 300px;
        height: 200px;
        border: 1px solid gray;
        /* padding: 0 150px; */
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* margin-left: -150px;
        margin-top: -100px; */
        
    }
</style>